﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Layout.aspx.cs" Inherits="Unknown.Example.Website.Major.Layout" %>

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title></title>
    <% = this.DojoResource %>
    <% = this.CustomResource %>
    <style type="text/css">
        html, body
        {
            overflow: hidden !important;
        }
        #container
        {
            width: 100%;
            height: 100%;
        }
        #banner
        {
            height: 60px;
            border: 0px;
            margin: 0xp;
            padding: 0px;
            overflow: hidden;
        }
        #status
        {
            height: 30px;
            border: 0px;
            margin: 0xp;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        require(['dojo/dom', 'dojo/query', 'dijit/registry', 'dijit/layout/ContentPane', 'dijit/layout/TabContainer', 'dojo/domReady!'],
         function (dom, query, registry, ContentPane, TabContainer) {
             var bing = dom.byId('loadBing');
             dojo.connect(bing, 'onclick', function () {
                 var tab = registry.byId('content');
                 var current = registry.byId('bing');
                 if (!current) {
                     current = new ContentPane({
                         id: 'bing',
                         title: "Food", closable: true,
                         content: '<iframe style="width: 100%; height: 100%; border: 0px" src="http://www.bing.com">'
                     });
                     tab.addChild(current);
                 }
                 tab.selectChild(current);
             });
             query('.menu').on('click', function (e) {
                 var tab = registry.byId('content');
                 var current = registry.byId(e.target.id + 'Tab');
                 if (!current) {
                     current = new ContentPane({
                         id: 'bing',
                         title: "Food", closable: true,
                         content: '<iframe style="width: 100%; height: 100%; border: 0px" src="' + e.target.getAttribute('href') + '">'
                     });
                     tab.addChild(current);
                 }
                 tab.selectChild(current);
                 return false;
             });
         });
    </script>
</head>
<body class="<% = this.DojoTheme %>">
    <div id="container" data-dojo-type="dijit/layout/BorderContainer">
        <div id="banner" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false">
            横幅
        </div>
        <div id="content" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'center', tabStrip:true">
            <div id="home" data-dojo-type="dijit/layout/ContentPane" selected="true" title="<div style='font-weight:bold'><img src='<% = this.Root %>Resource/Javascript/Custom/Image/glyphicons/glyphicons-21-home.png' style='height:15px;border:0px' />&nbsp;主页</div>">
                <div>
                    <div id="loadBing">
                        载入Bing
                    </div>
                    <div id="personnelEmployeeViewEditor" class="menu" href="<% = this.Root %>Personnel/EmployeeView/Editor.aspx">
                        载入Editor
                    </div>
                </div>
            </div>
            <div class="iframeContent" data-dojo-type="dijit.layout.ContentPane" title="My last tab"
                closable="true">
                <iframe style="width: 100%; height: 100%; border: 0px" src="<% = this.Root %>Personnel/EmployeeView/Editor.aspx">
                </iframe>
            </div>
        </div>
        <div id="status" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:false">
            状态栏
        </div>
    </div>
</body>
</html>
